import { Flag } from "../Icon/Flag";
import { observer } from "mobx-react-lite";
import { useStore } from "../../store";
import { emitter } from "../../eventEmitter";
import { CurModeColor, UnActiveModeColor } from "./Common";

const Rotate = observer((props: any) => {
    const { transformBarStore } = useStore();
    const rotate = (e: any) => {
        transformBarStore.setRotate(e.target.valueAsNumber);
    };


    const handleKeyDown = (e: any, action: string) => {
        if (e.key == "Enter") {
            e.target.blur();
        }
    };

    const blurHandler = (e: any) => {
        emitter.emit("updateTransform", transformBarStore.transformData);
    }


    const clickHandler = (e: any) => {
        if (transformBarStore.mode === "rotate") {
            transformBarStore.setMode("transform");
            emitter.emit("changeTransformModeType", "transform");
        } else {
            transformBarStore.setMode("rotate");
            emitter.emit("changeTransformModeType", "rotate");
        }
    };

    return (
        <div className="flex space-x-1">
            <svg className="w-5 h-5 hover:bg-gray-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                onClick={clickHandler}
            >
                <g strokeWidth="0"></g>
                <g strokeLinecap="round" strokeLinejoin="round"></g>
                <g>
                    <path d="M11.5 20.5C6.80558 20.5 3 16.6944 3 12C3 7.30558 6.80558 3.5 11.5 3.5C16.1944 3.5 20 7.30558 20 12C20 13.5433 19.5887 14.9905 18.8698 16.238M22.5 15L18.8698 16.238M17.1747 12.3832L18.5289 16.3542L18.8698 16.238"
                        stroke={transformBarStore.mode == "rotate" ? CurModeColor : UnActiveModeColor}
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round">
                    </path>
                </g>
            </svg>

            <input
                type="number"
                className="rounded-sm border-gray-200 shadow-sm p-0 text-white w-[8.25rem] bg-[#000c18]  text-sm"
                value={transformBarStore.transformData.rotation}
                onChange={rotate}
                onKeyDown={(e) => handleKeyDown(e, "rotate")}
                onBlur={blurHandler}
            />

            <Flag></Flag>
        </div>
    );
});

export { Rotate };

